<template>
	<view class="index-section">
		<tit tit="订场馆" url="/pages/tabBar/stadium" />
		<view class="clickableInfo">
			<clickBtn :tabList="tabList" @cur="cur" ref="clickBtn"/>
		</view>
		<view class="main">
			<contentsInfo :list="contentList" :isAddress="true" url="/pages/home/stadiumDetail" />
			<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 10rpx;">{{isText}}</view>
		</view>
	</view>
</template>

<script>
	import tit from '@/pages/index/cpns/title.vue';
	import clickBtn from '@/pages/index/cpns/clickBtn.vue';
	import contentsInfo from '@/pages/index/cpns/contentsInfo.vue';
	import {
		venueCategory,
		venueList
	} from "@/request/homeApi.js"

	export default {
		components: {
			tit,
			clickBtn,
			contentsInfo
		},
		data() {
			return {
				tabList: [],
				contentList: [],
				venue_category_id: 1,
				isText: ''
			};
		},
		mounted() {
			this.getCategory()
		},
		methods: {
			cur(e) {
				this.venue_category_id = e
				this.getList()
			},
			getCategory() {
				let that = this
				venueCategory().then(res => {
					if (res.code == 200) {
						that.tabList = res.data
						this.$refs.clickBtn.changeIndex()
						that.venue_category_id = res.data.length > 0 ? res.data[0].id : ''
						
						that.getList()
					}
				})
			},
			getList() {
				let that = this
				venueList({
					venue_category_id: that.venue_category_id,
					page: 1,
					limit: 2,
					title: '',
					type: '',
					recommend: 2
				}).then(res => {
					that.contentList = res.data.list
					res.data.count == 0 ? that.isText = '暂无场馆' : that.isText = ''
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-section {
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: #fff;

		.clickableInfo {
			margin: 20rpx 0;
		}

	}
</style>